<!-- 商品管理 -->
<template>
	<view class="">
		<u-navbar :is-back="true" title="商品管理"></u-navbar>
		<view class="bg-white padding20">
			<u-search placeholder="商品名称、商品Id、商家编码搜索" v-model="keyword"></u-search>
		</view>

		<view class="bg-white flex-bettwen padding-lr30">
			<view class="tab-item p-b20 center color-gray " @click="current = index"
				:class="current == index?'tab-item-active':''" v-for="(item,index) in tabList" :key="index">
				<view class="fs26">{{item.text}}</view>
				<view class="fs26">{{item.value}}</view>
			</view>
		</view>
		<view class="line-x"></view>
		<view class="padding-lr30 color-gray fs26 bg-white flex-bettwen" >
			<view class="m-t20 m-b20" @click="isShowSortTime = true">
				<text class="m-r10">{{currentSortText}}</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="flex-center m-t20 m-b20">
				<text class="m-r30">筛选</text>
				<text>|</text>
				<text class="m-l30">批量操作</text>
			</view>
		</view>

		<view class="padding30">
			<view class="m-b20 hidden br12 bg-white padding20" v-for="(item,index) in flowList" :key="index">
				<view class="flex">
					<u-lazy-load image="/static/images/img-goods.jpg" :index="index"
						class="w-130 h-130 m-r20 br16"></u-lazy-load>
					<view class="flex1 flex-column-between" style="">
						<view class="text-overflow fs26">{{item.text}}</view>
						<view class="color-gray fs24">销量108 <text class="margin-lr10">|</text>库存8374 <text
								class="margin-lr10">|</text>暂无评价</view>
						<view class="flex-bettwen">
							<view class="">
								<text class="price-color fs30" style="font-weight: bold;">￥{{item.price}}</text>
								<text class="fs24 color-gray">/{{item.unit}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-bettwen m-t20">
					<text class="fs24 color-gray">更多</text>
					<view class="">
						<u-button size="mini" class="m-r20">改价/库存</u-button>
						<u-button type="error" size="mini">下架</u-button>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 排序 -->
		<u-popup v-model="isShowSortTime" mode="bottom">
			<view class="padding30">
				<view class="center fs30 padding-tb20" @click="selectSortTime(item,index)" :class="currentSortTime == index?'color-blue':''" v-for="(item,index) in sortTime" :key="index">{{item}}</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				current: 0,
				tabList: [{
					text: '售卖中',
					value: 34,
				}, {
					text: '已下架',
					value: 2,
				}, {
					text: '审核中',
					value: 0,
				}, {
					text: '审核驳回',
					value: 0,
				}, {
					text: '草稿箱',
					value: 0,
				}, ],
				flowList: [{
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: true,
					price: '10000',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: false,
					price: '20323',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: false,
					price: '10000',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: false,
					price: '7673',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: true,
					price: '2343',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: true,
					price: '1123',
					unit: '米'
				}, ],
				isShowSortTime:false,
				currentSortTime:0,
				currentSortText:'最近创建在上',
				sortTime:[
					'最新创建在上',
					'最新创建在下',
					'最新上架在上',
					'最新上架在下',
					'销量从高到低',
					'销量从低到高',
					'价格从高到低',
					'价格从低到高',
					'库存从高到低',
					'价格从低到高',
				]
			}
		},
		methods:{
			selectSortTime(item,idx){
				this.currentSortText = item
				this.currentSortTime = idx
				this.isShowSortTime = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		text-align: center;
		position: relative;

	}

	.tab-item-active {
		color: #269dd1;
	}

	.tab-item-active::after {
		position: absolute;
		content: "";
		display: block;
		width: 50rpx;
		height: 10rpx;
		background: #269dd1;
		left: 50%;
		bottom: 0;
		transform: translate(-50%);
	}
</style>